<template>
  <div ref="playerRef" class="w1 h1"></div>
</template>
<script>
import "chimee-player/lib/chimee-player.browser.css"
import chimee from "chimee"
import chimeePluginControlbar from "chimee-plugin-controlbar"
import chimeePluginCenterState from "chimee-plugin-center-state"
import ChimeePlayer from "chimee-player"
chimee.install(chimeePluginControlbar)
chimee.install(chimeePluginCenterState)

export default {
  props: {
    url: {
      type: String,
      default: ""
    }
  },
  watch: {
    url() {
      this.initState()
    }
  },
  data() {
    return {
      chimee: null
    }
  },
  mounted() {
    this.initState()
  },
  methods: {
    initState() {
      const vm = this
      const url = this.url
      const dom = vm.$refs.playerRef
      vm.$nextTick(() => {
        vm.chimee = new ChimeePlayer({
          wrapper: dom,
          src: url,
          box: "hls",
          isLive: true,
          autoplay: true,
          controls: true,
          plugin: [chimeePluginControlbar.name, chimeePluginCenterState.name]
        })
      })
    }
  }
}
</script>
